<template>
  <div class="doc-detail">
    <el-empty v-if="!docTree.length" style="width: 100%" description="暂无文档内容" />
    <template v-else>
      <section class="category">
        <el-scrollbar>
          <el-tree
            :data="docTree"
            :props="defaultProps"
            :highlight-current="true"
            node-key="id"
            :current-node-key="currentNodeKey"
            :expand-on-click-node="false"
            default-expand-all
            @node-click="handleNodeClick"
          />
        </el-scrollbar>
      </section>
      <section class="container">
        <el-scrollbar ref="articleRef" v-if="valueHtml">
          <div class="article-header">
            <h2>{{ article.name }}</h2>
            <div>
              <span>阅读数：{{ article.viewCount }}</span>
              <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
              <span>点赞数：{{ article.voteCount }}</span>
              <el-divider />
            </div>
          </div>
          <article class="article" v-html="valueHtml"></article>
          <div class="article-footer">
            <el-button type="primary" :icon="Pointer" round @click="handleVote">
              点赞：{{ article.voteCount }}</el-button
            >
          </div>
        </el-scrollbar>
        <el-empty v-else style="width: 100%; height: 100%" description="暂无该章节内容" />
      </section>
    </template>
  </div>
</template>

<script setup>
import { getDocAll, getContent, vote } from '../../api/doc'
import { useRoute } from 'vue-router'
import { array2Tree, isNotEmpty } from '@/utils/index.js'
import { Pointer } from '@element-plus/icons-vue'

const route = useRoute()

const docTree = ref([])
const valueHtml = ref()
const article = ref()
const articleRef = ref()

const defaultProps = {
  children: 'children',
  label: 'name'
}

const currentNodeKey = ref()

const ebookId = computed(() => {
  return route.query.ebookId
})

onMounted(() => {
  queryDocAll()
})

const handleVote = async () => {
  const { success, message } = await vote(article.value.id)
  if (success) {
    article.value.voteCount += 1
  } else {
    ElMessage({
      type: 'error',
      message
    })
  }
}

const handleNodeClick = (node) => {
  currentNodeKey.value = node.id
  article.value = node
  queryContent(node.id)
  nextTick(() => {
    if (articleRef.value) {
      articleRef.value.setScrollTop(0)
    }
  })
}

const queryDocAll = async () => {
  const { success, data, message } = await getDocAll(ebookId.value)
  if (success) {
    docTree.value = array2Tree(data, 0)
    if (isNotEmpty(docTree.value)) {
      const docId = docTree.value[0].id
      article.value = docTree.value[0]
      queryContent(docId)
      nextTick(() => {
        currentNodeKey.value = docId
      })
    }
  } else {
    ElMessage({
      type: 'error',
      message
    })
  }
}
const queryContent = async (id) => {
  const { success, data, message } = await getContent(id)
  if (success) {
    valueHtml.value = data
  } else {
    ElMessage({
      type: 'error',
      message
    })
  }
}
</script>

<style lang="scss" scoped>
.doc-detail {
  display: flex;
  height: 100%;
  overflow: hidden;
  .category {
    width: 300px;
    border-right: 1px solid $base-border;
  }
  .container {
    flex: 1;
    .article-header {
      padding: 0 20px;
    }
    .article {
      padding-left: 20px;
    }
    .article-footer {
      padding: 10px 20px 0;
      text-align: center;
    }
  }
}
</style>
